JS基础15-事件监听

最新推荐文章于 2024-07-26 11:41:15 发布

diajiu9420

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/LuckyGJX/p/8657263.html

版权

一、监听事件理解

js的监听事件就是相当于注册一个监听器，随时检测对应事件有没有发生，如果发生了自动调用定义好的函数来处理。
一般情况下监听事件是对应于dom元素而言的，同时也需要声明所监听事件种类。
比如可以为一个按钮设置监听事件，点击之后自动调用相应函数处理。
同时可以在用函数处理时使用事件对象（event object）来获得关于触发这个事件的对象的信息。

二、标准DOM中的事件监听方法

[object].addEventListener(“事件类型”,”处理函数”,”冒泡事件或捕获事件”);

[object].removeEventListener(“事件类型”,”处理函数”,”冒泡事件或捕获事件”);

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>添加事件监听和取消事件监听</title>
<script type="text/javascript">
function show(){
    alert("添加了监听事件");
}    
    function cancel(){
        document.getElementById("b").removeEventListener("click",show);
    }
    function remove(){
        alert("失去焦点");
    }
    //当文档加载完成后执行
    window.οnlοad=function(){
        document.getElementById("b").addEventListener("click",show);
        document.getElementById("d").οnclick=cancel;
    }
</script>
</head>

<body>
<input type="button" id="b" value="按钮">
<input type="button" id="d" value="取消监听">
<input type="button" value="双击" onDblClick="show()">
<input type="button" value="坐上来，自己动" onMouseOver="show()">
<input type="text" value="b" onFocus="show()" onBlur="remove()">
<input type="text" value="b" onChange="show()" onSelect="remove()">
</body>
</html>

转载于:https://www.cnblogs.com/LuckyGJX/p/8657263.html

diajiu9420

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础15-事件监听

一、监听事件理解js的监听事件就是相当于注册一个监听器，随时检测对应事件有没有发生，如果发生了自动调用定义好的函数来处理。一般情况下监听事件是对应于dom元素而言的，同时也需要声明所监听事件种类。比如可以为一个按钮设置监听事件，点击之后自动调用相应函数处理。同时可以在用函数处理时使用事件对象（event object）来获得关于触发这个事件的对象的信息。二、标准DOM中的事件监...
复制链接

扫一扫