×

学习下JS里的bind()方法的应用

作者:天空2019.11.22来源:Web前端之家浏览:6169评论:0
关键词:jsbind()

bind()是jquery中的一个内置方法,用于为所选元素附加一个或多个事件处理程序,该方法指定事件发生时要运行的函数。

语法:

$(selector).bind(event, data, function);

参数:bind()方法接受以下指定的三个参数

● event:这是一个传递给所选元素的事件类型。

● data:这是可以在所选元素上显示的数据。

● function:这是由所选元素执行的函数。

返回值:返回对所选元素进行的所有修改。

示例1:使用bind()方法将“click”事件附加到给定的段落。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style> 
            .box { 
	            display: block; 
	            padding: 20px; 
	            width: 280px; 
	            border: 2px solid green; 
	        }
        </style> 
    </head> 
    <body>
    
    <div class="box">
    	<p>Click me!</p>
    	<div id="demo"></div>
    </div>
    <script src= "https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script> 
        $(document).ready(function() { 
            $("p").bind("click", function() { 
                $("#demo").text("hello");
            }); 
        }); 
    </script>
</body> 
  
</html>

示例2:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style> 
            p{ 
	            display: block; 
	            padding: 50px; 
	            width: 280px; 
	            border: 2px solid green; 
	        }
        </style> 
    </head> 
    <body>
    <p>Click me!</p>
    <script src= "https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script> 
        function handlerName(e) { 
            alert(e.data.msg); 
        } 
        $(document).ready(function() { 
            $("p").bind("click", { 
                msg: "你刚刚点击了段落!" 
            }, handlerName) 
        });  
    </script>
</body> 
  
</html>

两个例子,大家可以去看下。

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js923940239402394.html

网友评论文明上网理性发言 已有0人参与

发表评论: