JS基础15-事件监听

一、监听事件理解

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.onload=function(){
        document.getElementById("b").addEventListener("click",show);
        document.getElementById("d").onclick=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>

 

posted @ 2018-03-27 14:27  LuckyGJX  阅读(360)  评论(0)  编辑  收藏  举报