js常用事件
Posted 邢昊天
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js常用事件相关的知识，希望对你有一定的参考价值。
给元素添加事件的三种方式：
一：在标签元素内部 添加事件
onclick事件：点击事件；
ondbclick事件：双击事件；
onload事件：页面一开始加载的时候会先调用这个方法。此方法只能写在<body>标签之中。
onchange事件：当内容改变时触发。可用于文本框、列表框等对象，该事件一般用于响应用户修改内容带来的其他改变操作。
说明：当用户向一个文本框中输入文本时，不会触发onchange事件，只有用户输入结束后，单击文本框以外的区域，使文本框失去焦点时才触发该事件，如果是下拉框，则选择结束后即触发。
onblur事件和onfocus事件：onblur事件，当前元素失去焦点时触发该事件。对应的是onfocus事件：得到焦点事件。
onscroll事件：
窗口滚动事件：当页面滚动时调用函数。此事件写在方法的外面，且函数名后面不加括号，例如window.onscroll=move
functionmove() { alert("页面滚动时调用"); } window.onscroll = move;
鼠标相关事件：
onmousemove：鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，只要鼠标动一次就触发一次事件。
onmouseout：鼠标离开某对象范围时，触发事件调用函数。
onmouseover：鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，无论怎样移动都只触发一次函数。
onmouseup：当鼠标松开时触发事件。
onmousedown：当鼠标按下键时触发事件。
二 :通过循环给多个元素添加事件
<body>
<div class="one">111</div>
<div class="one">222</div>
<div class="one">333</div>
<div class="one">444</div>
</body>
</html>
<script type="text/javascript">
var one = document.getElementsByClassName("one");
for(var i =
三：通过addEventListener() 方法 监听事件函数
有参数：
<button id="myBtn">点我</button> <script> document.getElementById("myBtn").addEventListener("click", myFunction); function myFunction() { alert ("Hello World!"); } </script>
无参数：
<button id="myBtn">点我</button> <p id="demo"></p> <script> var p1 = 5; var p2 = 7; document.getElementById("myBtn").addEventListener("click", function() { myFunction(p1, p2); }); function myFunction(a, b) { var result = a * b; document.getElementById("demo").innerHTML = result; }
移除监听事件：
removeEventListener() 方法
<body> <div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。 <p>点击按钮移除 DIV 的事件句柄。</p> <button onclick="removeHandler()" id="myBtn">点我</button> </div> <p id="demo"></p> <script> document.getElementById("myDIV").addEventListener("mousemove", myFunction); function myFunction() { document.getElementById("demo").innerHTML = Math.random(); } function removeHandler() { document.getElementById("myDIV").removeEventListener("mousemove", myFunction); }
以上是关于js常用事件的主要内容，如果未能解决你的问题，请参考以下文章