jQuery-初识⑦

操作事件

<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <!--声明js代码域-->
    <script type="text/javascript">
        //js动态添加事件
        function testThing() {
            //获取元素对象
            var btn = document.getElementById("btn");
            //添加事件
            btn.onclick = function () {
                alert("我是js方式");
            }
        }
    </script>
</head>
<body>
    <h3>操作事件</h3>
    <input type="button" name="" value="测试js动态添加事件" onclick="testThing()">

    <hr>
    <input type="button" name="" id="btn" value="测试js">
</body>
</html>

效果：

先点击测试js 的按钮页面没有反应，当点击一次测试js动态添加事件的按钮再点击测试js的时候，会出现弹框

可以看出 onclick设置过函数的事件一旦写好，是不可以改变的

//jQuery操作事件
function testBind() {
    $("#btn2").bind("click",function () {
        alert("我是bind绑定单击事件");
    })
}

<h3>操作事件</h3>
<input type="button" name="" value="测试jQuery动态添加事件" onclick="testBind()">
<hr>
<input type="button" name="" id="btn2" value="测试jQuery-bind">

效果：

点击测试jQuery-bind没有反应

当点击测试jQuery动态添加事件再点击测试jQuery-bind 的时候会出现弹框

注意：这次你点击多少次测试jQuery动态添加事件就会弹出多少次弹框。

还有点击的 “测试jQuery动态添加事件”的按钮的次数是累加的，要想重新开始，需要刷新页面

js的函数里面下面的事件会覆盖上面的事件，jQuery就有有点了，给一个事件实现多个监听作用

如：

<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    </style>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <!--声明js代码域-->
    <script type="text/javascript">
        //jQuery操作事件
        function testBind() {
            $("#btn2").bind("click",function () {
                alert("我是bind绑定单击事件");
            });
            $("#btn2").bind("click",function () {
                alert("我是bind绑定单击事件2号");
            });
        }
    </script>
</head>
<body>
    <h3>操作事件</h3>
    <input type="button" name="" value="测试jQuery动态添加事件" onclick="testBind()">
    <hr>
    <input type="button" name="" id="btn2" value="测试jQuery-bind">
</body>
</html>

效果：

先点击一次没反应，再点击一次，再点击

先弹出

再弹出

————————————————————————————————————————

<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <!--声明js代码域-->
    <script type="text/javascript">
        //jQuery操作事件
        function testBind() {
            $("#btn2").bind("click",function () {
                alert("我是bind绑定单击事件");
            });
            $("#btn2").bind("click",function () {
                alert("我是bind绑定单击事件2号");
            });
        }
        //jQuery 解绑
        function testUnBind() {
            $("#btn2").unbind("click");
        }
    </script>
</head>
<body>
    <h3>操作事件</h3>
    <input type="button" name="" value="测试jQuery动态添加事件" onclick="testBind()">
    <input type="button" name="" value="测试jQuery动态解绑事件" onclick="testUnBind()">
    <hr>
    <input type="button" name="" id="btn2" value="测试jQuery-bind">
</body>
</html>

效果：

当点击，再点击，就不会再出现弹框了

解除点击这个事件，而不是监听函数没有。这个元素就不会在触发这个单击事件（移除事件）。js就不能解绑

————————————————————————————————————————————————

//一次性绑定
function testOne() {
    $("#btn3").one("click",function () {
        alert("我是one事件");
    })
}

<input type="button" name="" value="测试jQuery动态解绑事件-one" onclick="testOne()">
<hr>
<input type="button" name="" id="btn3" value="测试jQuery-bind">

点击再点击，再

可以出现一次弹框

再点击就不会出现了

——————————————————————————————————————————

//页面载入事件
//js
//<body>内添加 onload 是页面资源载入方式是效果相同的
window.onload = function () {
    alert("我是js方式页面加载");
}
window.onload = function () {
    alert("我是js方式页面加载2号");
}

刷新页面就会出现弹框

同名变量赋值，新的值会覆盖旧的值

-------------------------

而jQuery就不会覆盖。在页面载入的过程中，动态执行多个操作

//jQuery
$(document).ready(function () {
    alert("我是jQuery");
});
$(document).ready(function () {
    alert("我是jQuery1");
});

效果：依次出现

操作事件

猜你喜欢