JavaScript——事件

最新推荐文章于 2019-07-02 20:56:17 发布

Regina_Wan

最新推荐文章于 2019-07-02 20:56:17 发布

阅读量612

点赞数 3

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： JavaScript 事件

本文链接：https://blog.youkuaiyun.com/Yun_Ge/article/details/89061483

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了事件绑定的三种方法，包括直接绑定、外部函数绑定及内联函数绑定，并讲解了如何同时绑定多个事件、取消事件绑定、获取事件对象、处理事件冒泡及超链接点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件绑定的三种方式：
1、一步到位，简单易懂

	<body>
	<div id="div"style="width:300px;height:300px; background-color:red">
	</div>
	<script>
		var oDiv = document.getElementById('div');
		oDiv.onclick=function(){
			this.style.backgroundColor='yellow';
		}
	</script>
	</body>

2、在样式外调用函数

<body>
	<div id="div"style="width:300px;height:300px; background-color:red">
	</div>
	<script>
		var oDiv = document.getElementById('div');
		oDiv.onclick=change;
		function change(){
			oDiv.style.backgroundColor='blue'
		}
	</script>
	</body>

3、在样式内调用函数

<body>
	<div id="div"style="width:300px;height:300px; background-color:red"
	onclick="change(this)">
	</div>
	<script>
		var oDiv = document.getElementById('div');
		function change(obj)
		{
			obj.style.backgroundColor="pink";
		}
	</script>
	</body>

同时绑定多个事件和取消事件：

<body>
		<div id="div"style="width:300px;height:300px; background-color:red">
	</div>
	<script>
		var oDiv = document.getElementById('div');
		//绑定两个事件
		oDiv.addEventListener('click',test1)
		oDiv.addEventListener('click',test2)
		//取消绑定事件
		oDiv.removeEventListener('click',test1)
		function test1()
		{
			console.log(1);
		}
		function test2()
		{
			console.log(2);
		}
	</script>
	</body>

获取事件对象：

body>
	<div id="div"style="width:300px;height:300px; background-color:red">
	hello</div>
</body>
<script>
		var oDiv = document.getElementById('div');
		oDiv.onclick=function(ev)
		{
			//火狐谷歌支持ev操作,IE支持event操作
			var oEvent = ev||window.event;//如果是谷歌则取ev值，否则取event值
			alert(oEvent);//弹出鼠标事件[object MouseEvent]
			alert(oEvent.srcElement)//获取事件源对象[object HTMLDivElement]
			alert(oEvent.srcElement.innerHTML)//获取事件源对象的内容
		};
</script>

事件冒泡：

body>
	<div id="div1"style="width: 300px;height: 300px;background-color: red;">
		<div id="div2"style="width: 100px;height: 100px;background-color: yellow;">
		</div>
	</div>
	
</body>
<script>
	//两个div重合在一起，点击子节点时同时也会触发父节点的鼠标点击事件
	var oDiv1 = document.getElementById('div1')
	var oDiv2 = document.getElementById('div2')
	oDiv2.onclick=function(ev){
		ev.cancelBubble=true;//取消事件冒泡
		console.log(100);
	}
	oDiv1.onclick=function(){
		console.log(200);
	}
</script>

超链接和点击事件同时发生：
将会先触发onclick事件，然后跳转到相应链接。

	<body>
	<a href="http://www.baidu.com"onclick="demo();">百度</a>
	</body>
	<script>
	function demo(ev)
	{
		alert(100);
	}
	</script>

取消同时两个事件发生：

	<body>
	<a href="http://www.baidu.com"onclick="return demo()">百度</a>
	</body>
	<script>
	function demo()
	{
		alert(100);
		return false;
	}
	</script>
	<body>