js事件处理相关

最新推荐文章于 2024-10-10 10:50:43 发布

zx_world

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量100

点赞数

文章标签： js javascript js事件处理 js事件处理程序 js事件模型 ViewUI

本文链接：https://blog.csdn.net/zx_world/article/details/84546826

版权

js的事件模型是事件流模型，即意味着页面上不止一个元素响应相同的事件，当我们点击页面上的按钮时，实际上是点击了按钮，以及按钮的容器------整个页面。

对于IE，使用的是事件冒泡技术。其意思是从最内部点击的元素开始，向上触发到最外部(document 对象)。

而对于Netscape来说，使用称为事件捕获的解决方案。

如：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

事件冒泡触发路径为：input->body->document

到了IE3.0, HTML元素也可以接收冒泡事件。触发路径为：input->body->html->document

Mozilla浏览器支持html元素上的事件。但是，事件也可以上升到不是DOM的一部分的windows对象。

触发路径为:input->body->html->document->window

事件捕获

Netscape 触发路径为：document->body->input

DOM事件流

DOM同时支持事件的捕获和事件的冒泡, 但是事件捕获先发生。

触发路径：windows->document->body->input->body->document->windows

DOM事件有一个特色是，文本节点也可以触发事件(IE不行)。

事件处理：包括两个方面：传统事件处理和现代事件处理

传统事件处理：1、所有浏览器都支持。2、只会执行最后的绑定事件，即执行单一事件

(1)js中指定事件处理

匿名函数指定事件

var obtn = document.getElementById("mybtn");

obtn.onclick = function(){

alert("====");

}

</script>

已有函数名

function showmsg(){

alert("-_-!!");

}

</script>

<body>

var obtn = document.getElementById("mybtn");

obtn.onclick = showmsg;

</script>

</body>

注意：1、绑定事件处理程序到事件属性时，只能引用函数的名称，后面不能加括号。加括号意味着马上执行函数，不用通过点击事件。

2、不论函数的定义是怎样的，必须确保在XHTML元素被添加到DOM之前，登记事件处理程序，否则，将因为一个不存在的对象而得到一个错误。即最好不要将事件处理程序写在HTML标签后。

(2)XHTML标记中处理事件

注意：在传统事件处理中不可书写多个相同的事件，事件处理会覆盖，只执行最后绑定的事件：

var obtn = document.getElementById("mybtn");

obtn.onclick = function(){

alert("0_-!!");

}

</script>

运行结果只会执行最后绑定的第二个。这就是单一事件处理。

现代事件处理程序

1、兼容性不是很好。2、可以为每个事件指派多个事件处理。

(1)IE中

[object].attachEvent("事件处理程序的名称", 函数); // 添加事件处理程序

[object].detachEvent("事件处理程序的名称", 函数); // 删除事件处理程序

如：

function showmsg(){

alert("-_-!!");

}

function showmsg2(){

alert("0_-!!");

}

</script>

<body>

var obtn = document.getElementById("mybtn");

obtn.attachEvent("onclick", showmsg);

obtn.attachEvent("onclick", showmsg2);

</script>

</body>

(2)DOM

[object].addEventListener("事件处理程序的名称", 函数, bCapture); // 添加事件处理程序

[object].removeEventListener("事件处理程序的名称", 函数, bCapture); // 删除事件处理程序

第三个参数是指程序是否用在冒泡或捕获阶段。

function showmsg(){

alert("-_-!!");

}

function showmsg2(){

alert("0_-!!");

}

</script>

<body>

var obtn = document.getElementById("mybtn");

obtn.addEventListener("click", showmsg,false);

obtn.addEventListener("click", showmsg2,false);

</script>

</body>

用传统方式直接将函数指派给事件处理程序，那么事件处理程序就是在冒泡阶段添加的。

obtn.onclick = showmsg;

obtn.addEventListener("click", showmsg,false);

事件处理的返回值

只有使用return语句了才会返回一个值

如果是这样：那么confirm的值是不会返回给浏览器的。

zx_world

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫