【JavaScript系列】动态绑定事件方法:(1)jquery的on方法;(2)html元素绑定

suis 2019-07-25

一、动态监听加载对象

当使用js或jQuery动态创建元素(例如append,appendChildren),再用on(事件, function(){...})或addEventListener监听事件时,事件并不会触发,因为传统的$('.selector').click()只能监听html初始的对象,对于动态加载的操作,需要在加载后给他的操作行为绑定方法。

  所以,我们可以使用jQuery的on()事件来获取未加载页面的内容,并为它添加一个或多个事件处理程序。

二、jQuery.on()用法

1、定义和用法

(1)on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

(2)自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。

(3)注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

(4)提示:如需移除事件处理程序,请使用 off() 方法。

(5)提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。

2、语法

$(selector).on(event,childSelector,data,function)

【JavaScript系列】动态绑定事件方法:(1)jquery的on方法;(2)html元素绑定

三、事件绑定方式执行顺序:html属性 > dom元素(onclick方法)

先看例子1

<body>
    <p id="p-style" class="p-style" onclick="htmlOnclick()">点击这个段落。</p>
</body>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        // onclick这个是通过 dom元素属性 绑定事件,只能有一个事件执行. DOM level 0
        var a = document.getElementById('p-style');
        a.onclick = function () {
            console.log("6、段落被点击了。");
        };
        a.onclick = function () {
            console.log("7、段落被点击了。");
        };
    });

    // 通过 html属性 绑定事件,只能有一个事件执行
    function htmlOnclick() {
        console.log("4、段落被点击了。");
    }

</script>

输出结果:

7、段落被点击了。

说明:4和6绑定的点击事件被7的事件覆盖。

分析:

(1)不同绑定事件方式的执行顺序:html属性 > dom元素属性

(2)同一种绑定事件方式顺序:写在前面 > 写在后面

说明:实际项目中,jq和原生js不要混着用。

四、事件绑定方式执行顺序:html属性 > dom元素(onclick方法) > DOM level 2 事件

我们看个栗子

<body>
    <p id="p-style" class="p-style" onclick="htmlOnclick()">点击这个段落。</p>
</body>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var a = document.getElementById('p-style');
        // 这个on的方法,click方法,原生的addEventListener原理一致. DOM level 2
        $("p").on("click", function () {
            console.log("1、段落被点击了。");
        });
        $(".p-style").on("click", function () {
            console.log("2、段落被点击了。");
        });
        $(".p-style").click(function () {
            console.log("3、段落被点击了。");
        });
        $(".p-style").click(function () {
            console.log("5、段落被点击了。");
        });
        a.addEventListener('click',function(){
            console.log("8、段落被点击了。")
        })
        a.addEventListener('click',function(){
            console.log("9、段落被点击了。")
        })

        // onclick这个是通过 dom元素属性 绑定事件,只能有一个事件执行. DOM level 0
        a.onclick = function () {
            console.log("6、段落被点击了。");
        };
        a.onclick = function () {
            console.log("7、段落被点击了。");
        };
    });

    // 通过 html属性 绑定事件,只能有一个事件执行
    function htmlOnclick() {
        console.log("4、段落被点击了。");
    }

</script>

输出结果:

7、段落被点击了。
1、段落被点击了。
2、段落被点击了。
3、段落被点击了。
5、段落被点击了。
8、段落被点击了。
9、段落被点击了。

说明:通过addEventListener方式绑定事件(jq的on方法,js的click方法)是可以绑定多个事件。

分析:

(1)不同的绑定方式执行顺序:html属性 > dom元素(DOM level 0 事件) > DOM level 2 事件。

(2)DOM level 2 事件中:谁先绑定谁先执行。

(3)jq的on,js的click,addEventListener,可以绑定多个事件。

说明:实际项目中,jq和原生js不要混着用。

五、动态绑定:jq的on方法+html的属性onclick方法

实用jq或者原生js创建元素(比如:append,appendChild,insertBefoe等),实用on(event, fun)或者addEventListener等传统的监听事件,事件不会触发。原因:不能这些方法只能监听到html初始化的对象,后续动态添加的方法需要寻找其他绑定方法。jq的on()方法+html的属性onclick方法。

<body>
    <input id="txt1" type="text" />
    <input id="btn1" type="button" value="创建li" />
    <ul id="ul1"></ul>
</body>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#btn1").on("click", function () {
            var oli = document.createElement('li');
            var otxt = document.getElementById("txt1");
            var oul = document.getElementById("ul1");

            oli.innerHTML = otxt.value + '<a onclick="deleteItem()" class="ac" id="ac" href="javascript:;">删除</a>';
            ali = oul.getElementsByTagName("li");

            if (ali.length > 0) {
                oul.insertBefore(oli, ali[0]);
            }
            else {
                oul.appendChild(oli);
            }
        });

        // on, click 都属于 DOM level 2 事件
        $('.ac').on('click', function () {
            console.log('1、删除按钮。')
        });
        $('.ac').click(function () {
            console.log('2、删除按钮。')
        });


        //动态监听 
        $(document).on('click', '.ac', function () {
            console.log('4、删除按钮。')
        });
    });

    // addEventListenner 都属于 DOM level 2 事件
    var ac = document.getElementById("ac")
    if (ac) {
        ac.addEventListener('click', function () {
            console.log('3、删除按钮。')
        });
    } else {
        console.log('未获取到dom元素。')
    }

    // html元素绑定 DOM level 0 事件
    function deleteItem() {
        console.log('5、删除按钮。')
    }

</script>

我们发现,点击删除的时候,输出

5、删除按钮。
4、删除按钮。
说明:

1、执行顺序:html的属性绑定比jq的on方法快。(html属性绑定>DOM level 2 事件)

2、动态绑定事件方法:(1)jq的on方法;(2)html的属性绑定。

说明:实际项目中,jq和原生js不要混着用。

六、总结

上面例子的jq是1.10的版本。

1、事件的绑定方法:(1)html属性绑定(比如:onclick),(2)dom元素属性(比如onclick),也叫DOM level 0 事件,(3)原生的addEventListener和jq的on和jq的click(DOM level 2 事件)。

2、绑定方法的执行顺序:html属性 > dom元素属性 > DOM level 2 事件

3、同一种绑定事件方式顺序:写在前面 > 写在后面。

4、html属性和dom元素属性绑定方法最终只有最后一个事件会执行。

相关推荐

Web全栈笔记 / 0评论 2020-06-15