JavaScript事件

*南汐*

已于 2022-06-30 14:46:12 修改

阅读量73

点赞数

文章标签： javascript 前端开发语言

于 2022-06-30 11:44:58 首次发布

本文链接：https://blog.csdn.net/m0_52217105/article/details/125537442

版权

3、使用监听函数addEventListener() 绑定

一、什么是事件

事件是发生在 HTML 元素上的一些事情。

二、事件三要素

事件源：网页上的元素。如：按钮，输入框等
事件类型：为用户或浏览器的行为。如：鼠标点击，选中输入框等
事件处理程序：事件发生后定义的程序。如：跳转网页、算数运算等

三、绑定事件

1、在DOM元素中直接绑定

<button onclick=“alert(2)">按钮</button>

违反了HTML与JavaScript代码相分离的原则，一般不用。

2、在JavaScript代码中绑定

<script>
var btn = document.getElementById('btn')
        btn.onclick=function(){
            alert("我被点击了~~~")
        }
</script>
/*同一元素同一个事件只能定义一个监听函数*/

3、使用监听函数addEventListener() 绑定

<script>
	document.getElementById('btn').addEventListener('click',function(){
            alert(5);
        });
</script>
/*可以针对同一个元素的同一个事件，添加多个监听处理函数*/

四、解绑事件

直接删除法，使用“对象.οnclick=false;”
使用addEventListener绑定事件，使用removeEventListener删除绑定事件即可

五、常用事件

事件	说明
onclick	鼠标单击时触发此事件
ondblclick	鼠标双击时触发此事件
onmouseover	鼠标移动到某个设置了此事件的元素上时触发此事件
onmouseout	鼠标从某个设置了此事件的元素上离开时触发此事件
onfocus	当某个元素获得焦点时触发此事件
onblur	当前元素失去焦点时触发此事件
onkeydown	当键盘上的某个按键被按下时触发此事件
onkeyup	当键盘上的某个按键被按下后弹起时触发此事件

六、实例

1、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     
    </style>
</head>
<body>

   <input type="button" id="btn_1"value="新增元素">
</body>
 <script>
   var button = document.querySelector("#btn_1");

   button.onclick=function(){

    addElement();
   }
        function addElement(){
            var box=document.createElement("img");
            box.style.width="100px";
            box.style.height="100px";
            box.style.backgroundColor="#bfa";
            box.style.position="absolute";
            box.style.left=Math.random()*1000+"px";
            box.style.top=Math.random()*600+"px";

            box.src="../java/m1.jpg"

            var body = document.body;
            body.appendChild(box);
            
            body.style.backgroundColor="rgb("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+")";
        }
    </script>
</html>