JS事件之绑定事件

最新推荐文章于 2024-06-25 12:59:58 发布

关耳佳

最新推荐文章于 2024-06-25 12:59:58 发布

阅读量1.2w

点赞数 1

分类专栏： JS小记

本文链接：https://blog.csdn.net/u014205965/article/details/45651875

版权

JS小记专栏收录该内容

25 篇文章 9 订阅

订阅专栏

JS中的事件是js中很重要的一部分内容，充分理解事件机制是必不可少的。

JS中事件分类：

鼠标事件：onclick, ondbclick, onmouseover,onmousedown, onmouseup,onmousemove,onmouseout等

键盘事件：onkeyup，onkeydown,onkeypress...

表单事件：onsubmit，onblur，onfoucs，onchange..

页面事件：onload，onunload，onreload...

既然有这么多的事件，那么怎么给元素绑定事件那？？看一下给元素绑定事件应该有几种方法！

第一种方法：HTML元素行间事件（也可以叫HTMl事件处理程序）,直接在html标签里添加事件。

缺点：html和js代码紧密耦合

<input type="button" οnclick="test();"/>
<script>
        function test() {
            alert("我是行间事件");
        }
 </script>

第二种添加事件的方法，用的比较多的一种方式：把一个函数赋值给一个事件处理程序属性。（这种方式也叫做Dom0级事件处理程序）

简单而且有跨浏览器的优势

<body>
<input id="button1"type="button" value="按钮"/>
<script>
    oBtn = document.getElementById('button1');// 获取的按钮元素
    //定义函数abc
    function abc(){
        alert('abc');
    }
    oBtn.οnclick=function abc(){alert('abc');}
    //oBtn.οnclick=abc;//当点击的时候执行abc这个函数，等价于 oBtn.οnclick=function 	abc(){alert('abc');}
</script>
</body>

如何要去掉绑定的事件：直接让btn2.onclick = null；即可

上面的这种方式在web开发中是比较常用的方式，onclick，onmousemove等这些事件在网页中都可以很到的支持，但是在手机上就失效了，在手机上需要通过“事件监听”的方式来实现事件绑定，接下来看看第三种方式

第三种方法：通过“事件监听”的方式来绑定事件（也叫Dom2级事件处理程序）

<input  id="inputBtn" type="button" value="click"/>
<script>
    var inputBtn = document.getElementById('inputBtn');
    inputBtn.addEventListener('click',showMsg,false);//鼠标单击的时候调用showMes这个函数
    function showMsg() {
        alert("事件监听");
    }
</script>

注意：这里<script>要放在input下面

addEventListener('click',showMsg,false); 有三个参数

第一个代表触发什么事件，注意这里的写法没有on

第二个参数代表事件发生时调用的事件处理函数

第三个参数是布尔值：true或者false

第三个参数是true：表示允许在捕获阶段响应事件

第三个参数是false：表示不允许在捕获阶段响应事件

(如果看不懂第三个参数说的意思),可以参考我的另一篇博客《JS事件之事件流机制》

上面写的通过addEventListener“事件监听的”方式绑定事件在IE下有问题，因为IE下支持addEventListener这个方法，IE的方法是attachEvent(“onclick”,showMsg);IE的attachEvent只有两个参数

第一个代表触发什么事件，注意这里的写法有on

第二个参数代表事件发生时调用的事件处理函数

以上所述就是第三者绑定事件的方式，这种方式在pc上也都是支持的，只不过不同浏览器支持的方式有略微不同，所以在PC端用事件监听方式绑定事件的时候需要处理一下浏览器兼容的问题

<script>
    var inputBtn = document.getElementById('inputBtn');
    if(typeof window.addEventListener != "undefined"){
        // 表示不是IE，支持addEventListener方法
        inputBtn.addEventListener('click',showMsg,false);
    }else{
        inputBtn.attachEvent("onclick",showMsg);
    }
 
    function showMsg() {
        alert("事件监听");
    }
</script>

第三种方式绑定的事件怎么去除那？

inputBtn.removeEventListener('click',showMsg,false); 就ok了

关耳佳

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
JS事件之绑定事件

JS中的事件是js中很重要的一部分内容，充分理解事件机制是必不可少的。JS中事件分类：鼠标事件：onclick, ondbclick, onmouseover,onmousedown, onmouseup,onmousemove,onmouseout等键盘事件：onkeyup，onkeydown,onkeypress...表单事件：onsubmit，onblur，onfoucs
复制链接

扫一扫