JavaScript-绑定事件的三种方式(原生方式和bind方法)

事件绑定的三种方式

  • 第一种
    • 直接在标签中绑定事件
  • 第二种
    • 1. 原生JavaScript代码实现
    • 2. 使用JQuery对象转换成JavaScript对象实现
  • 第三种
    • 1.使用click方法
    • 2.使用bind方法
      • a.绑定一个事件
      • b.绑定多个事件
    • 取消绑定事件

第一种

直接在标签中绑定事件


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" >script>
	<script>
		function test() {
			alert("delete");
		}
	script>
	<body>
		<a href="#" onclick="test()">删除a>	
	body>
html>

结果
JavaScript-绑定事件的三种方式(原生方式和bind方法)_第1张图片

第二种

使用JavaScript对象绑定事件

1. 原生JavaScript代码实现


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" >script>
	<body>
		<a id="deleteA" href="#">删除a>
	body>
	<script>
		document.getElementById("deleteA").onclick = function() {
			alert("删除");
		}
	script>
html>

2. 使用JQuery对象转换成JavaScript对象实现


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" >script>
	<body>
		<a href="#">删除a>
	body>
	<script>
		//将JQuery对象转换成JavaScript对象
		$("[href]")[0].onclick = function() {
			alert("删除");
		}
	script>
html>

JavaScript-绑定事件的三种方式(原生方式和bind方法)_第2张图片

第三种

使用JQuery对象绑定事件

1.使用click方法


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" >script>
	<body>
		<a href="#">删除a>
	body>
	<script>
		$("[href='#']").click(function() {
			alert("JQuery");
		})
script>
html>

效果
JavaScript-绑定事件的三种方式(原生方式和bind方法)_第3张图片

2.使用bind方法

a.绑定一个事件


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" >script>
	<body>
		<a href="#">删除a>
		
	body>
	<script>
		$("[href='#']").bind("click",function(){
			alert("JQuery bind");
		})
script>
html>

效果
JavaScript-绑定事件的三种方式(原生方式和bind方法)_第4张图片

b.绑定多个事件


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" >script>
	<body>
		<a href="#">删除a>
		
	body>
	<script>
		$("[href ='#']").bind({
			click:function(){
				alert("事件一");
			},
			mouseover:function() {
				alert("事件二");
			}
		})
script>
html>

鼠标移动到标签上的时候的效果
JavaScript-绑定事件的三种方式(原生方式和bind方法)_第5张图片
按下空格,然后点击删除的效果
JavaScript-绑定事件的三种方式(原生方式和bind方法)_第6张图片

取消绑定事件

使用JQuery对象的unbing方法即可


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" >script>
	<body>
		<a href="#">删除a>
	body>
	<script>
		$("[href='#']").bind("click",function(){
			alert("JQuery bind");
			$("[href ='#']").unbind();
		})
script>
html>

第一次点击弹出窗口
JavaScript-绑定事件的三种方式(原生方式和bind方法)_第7张图片
再次点击就没有窗口弹出来了
JavaScript-绑定事件的三种方式(原生方式和bind方法)_第8张图片

你可能感兴趣的:(前端)