码迷,mamicode.com
首页 > Web开发 > 详细

js常用事件

时间:2019-11-10 15:20:55      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:随机数   调用   下拉框   标签   窗口   elements   seo   one   onchange   

给元素添加事件的三种方式:

一:在标签元素内部 添加事件

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常用事件

标签:随机数   调用   下拉框   标签   窗口   elements   seo   one   onchange   

原文地址:https://www.cnblogs.com/www1842564021/p/11830073.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!