js-07-事件

狂风中的少年 提交于 2019-11-28 04:57:01

 一、js事件绑定在对象上的三种方法

a:将事件绑定在元素标签的属性上

<h3 onclick="console.log('奥特曼打怪兽')">海绵宝宝历险记</h3>

b:将事件作为属性添加到对象上

<h4>海绵宝宝历险记2</h4>

window.onload = function(){
    var h4 = document.getElementsByTagName('h4')[0];
    h4.onclick = function(){
    console.log('奥特曼第二次打怪兽');
        }
}

c:将事件作为方法添加到对象上。       方法名称:addElementListener()→ 向指定元素添加事件

<h4>海绵宝宝历险记3</h4>

window.onload = function(){
    var h4 = document.getElementsByTagName('h4')[0];
    var fyh=function(){
        console.log('奥特曼第三次打怪兽');
    }
                
h4.addEventListener('click',fyh,false);      
  //事件名称、处理程序(回调方法)、false以冒泡方式处理
h4.removeEventListener('click',fyh,false);   
  //将次方法移除;方法名称:removeEventListener
                
} 
事件监听→ 事件监听移除   true 的触发顺序总是在 false 之前;如果多个均为 true,则外层的触发先于内层;如果多个均为 false,则内层的触发先于外层。

二、冒泡事件和捕获事件

  //捕获事件发生过程:window-document-body-div-button (从大到小)

  //冒泡事件发生过程:div-body-document-window     (从小到大)

a:冒泡事件

<h2>中国</h2>
    <ul>
        <li>1111111111</li>
        <li>2222222222</li>
        <li>3333333333</li>
    </ul>    

<script>

window.onload = function(){
var li= document.getElementsByTagName('li');
var ul= document.getElementsByTagName('ul')[0];
document.body.onclick=function(m){
alert('我是body');
}
ul.onclick=function (m){
alert('我是ul');
}
for (var i=0;i<li.length;i++){
li[i].onclick=function (m){
alert('我是li');
//冒泡拦截
m.cancelBubble=true; //拦截冒泡
m.stopPropagation();
}
}
}

</script>

  注:a:输出结果由内往外弹出我是li/ul/body

    b:cancelBubble=true{true为拦截冒泡,默认值是false}

       stopPropagation()

        俩个同为拦截冒泡的方式,写在一起是为了浏览器兼容使用。

b:捕获事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div2{width:200px;height:200px;background:#f00;}
			
		</style>
	</head>
	<body>
		 <div id="div2">
                <div id="div1">点我</div>
        </div>
    <script>
    	//事件的捕获
        var div2=document.getElementById('div2');
        var div1=document.getElementById('div1');
        div2.addEventListener('click', function(event){console.log("A");}, false);
//      div2.addEventListener('click', function(event){console.log("B");});
        div1.addEventListener('click', function(event){console.log("C");}, false);
//      div2.addEventListener('click', function(event){console.log("D");}, true);
    </script>
	</body>
</html>

  注:返回结果为C、A

三、addEventListener绑定click与直接写onclick的区别

<body>
	<!--addEventListener绑定click与直接写onclick的区别-->	
	<ul id="difference">
	    <li id="add_event">11111111</li>
	    <li id="on_click">22222222222</li>
	</ul>		
         <script>
		var on_click = document.getElementById('on_click');
		on_click.onclick=function(){
//			alert('click1');
		};
		on_click.onclick=function(){
//			alert('click2');
		};
//onclick绑定了两次,由于click在同一时间只能指向唯一对象,所以当对象绑定了多次,只会出现最后一次绑定。
			
		var add_event = document.getElementById('add_event');
		add_event.addEventListener('click',function(){
			alert('add_event1');
		},false);
		add_event.addEventListener('click',function(){
			alert('add_event2');
		},false);
			
	//多次事件绑定的运行时使用
		</script>
	</body>    

 四、onchange事件(HTML元素被改变)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		function myFunction(){
		var x=document.getElementById("fname");
		     x.value=x.value.toUpperCase();     //获取X内的值,将input框内元素被    
 改变。
		}
	</script>
	<body>
	输入你的名字: <input type="text" id="fname" onchange="myFunction()">
		<p>当你离开输入框后,函数将被触发,将小写字母转为大写字母。</p>
	</body>
</html> 

 五、onkeydown(用户按下键盘按键)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function myFunction(){
			alert("你在输入栏内按下一个键");
			}
		</script>
	</head>
	<body>
		<p>当你在输入框内按下一个按键是函数被触发</p>
		<input type="text" onkeydown="myFunction()">
	</body>
</html>

六、onmouseover(用户把鼠标移到HTML上)和onmouseout(用户把鼠标移开HTML上)

  {示例参考w3c}  

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!