事件绑定的第二种形式

最新推荐文章于 2024-03-03 05:00:00 发布

我的IP在路上

最新推荐文章于 2024-03-03 05:00:00 发布

阅读量498

点赞数

分类专栏： web前端笔记文章标签：事件处理事件绑定

本文链接：https://blog.csdn.net/u012552049/article/details/45501057

版权

web前端笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
//给一个对象绑定一个事件处理函数的第一种形式
//obj.onclick = fn;
function fn1() {
    alert(this);
}
function fn2() {
    alert(2);
}

//document.onclick = fn1;
//document.onclick = fn2;   //会覆盖前面绑定fn1

//给一个对象的同一个事件绑定多个不同的函数
//给一个元素绑定事件函数的第二种形式

/*
ie：obj.attachEvent(事件名称，事件函数);
    1.没有捕获
    2.事件名称有on
    3.事件函数执行的顺序：标准ie-》正序   非标准ie-》倒序
    4.this指向window
标准：obj.addEventListener(事件名称，事件函数，是否捕获);
    1.有捕获
    2.事件名称没有on
    3.事件执行的顺序是正序
    4.this触发该事件的对象
*/

/*document.attachEvent('onclick', function() {
    fn1.call(document);
});
document.attachEvent('onclick', fn2);*/

//是否捕获 : 默认是false    false:冒泡 true：捕获

/*document.addEventListener('click', fn1, false);
document.addEventListener('click', fn2, false);*/

function bind(obj, evname, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evname, fn, false);
    } else {
        obj.attachEvent('on' + evname, function() {
            fn.call(obj);
        });
    }
}

bind(document, 'click', fn1);
bind(document, 'click', fn2);
</script>
</head>

<body>
</body>
</html>

事件取消：
事件绑定的第一种形式：
Obj.事件=事件函数，对应的事件取消为obj.事件=null;
事件绑定的第二种形式：
1.在标准浏览器下：
obj.addEventListener(事件名称，事件函数，是否捕获)；
2.在非标准的IE下：
obj.attchEvent(事件名称，事件函数)；
对应的事件取消为：
1.obj.removeEventListener(事件名称，事件函数，是否捕获)；注意事件函数和是否捕获都要对应绑定的函数和是否捕获。
2.obj.detachEvent(事件名称，事件函数);

我的IP在路上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件绑定的第二种形式

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script>//给一个对象绑定一个事件处理函数的第一种形式//obj.onclick = fn;function fn1() { alert(th
复制链接

扫一扫

专栏目录