이전 글 "JavaScript를 사용하여 배열의 마지막 항목 삭제(3가지 방법)"에서 JavaScript를 사용하여 배열의 마지막 항목을 삭제하는 방법을 소개해드렸는데요, 관심 있는 친구들은 가서 배워보세요~
이 글에서 설명하는 중요한 내용은 jQuery를 통해 요소에 클릭 및 더블클릭 이벤트를 추가하는 방법입니다.
이 글에서는 bind()
메소드를 통해 클릭 및 더블클릭 이벤트를 추가하겠습니다. 바인딩() 메서드는 선택한 요소에 하나 이상의 이벤트 핸들러와 이벤트가 발생할 때 실행할 함수를 추가합니다. 또한 선택한 요소의 끝(여전히 내부)에 지정된 콘텐츠를 삽입하는appendTo() 메서드를 사용하여 요소에 결과를 추가합니다. bind()
方法添加单击和双击事件。bind() 方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数。此外,我们还会使用appendTo() 方法将结果添加到元素,appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。
下面我们直接上代码:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery.min.js"></script> <script> $(document).ready(function () { $(".clickable_ele").bind("click", function () { $("<h4>调用单击事件</h4>") .appendTo(".res"); }); $(".clickable_ele").bind("dblclick", function () { $("<h4>调用双击事件</h4>") .appendTo(".res"); }); }); </script> <style> body { text-align: center; } h1 { color: #ff311f; } .clickable_ele { font-size: 20px; font-weight: bold; color: #ff7800; } </style> </head> <body> <h1>PHP中文网</h1> <h3> 如何给一个元素添加单击和双击事件? </h3> <div class="clickable_ele"> 可点击的元素 </div> <div class="res"></div> </body> </html>
效果如下:
bind()语法是$(selector).bind(event,data,function,map)
参数分别表示: event必需。规定添加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。 data可选。规定传递到函数的额外数据。 function必需。规定当事件发生时运行的函数。 map规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。
appendTo()语法是$(content).appendTo(selector)
코드로 바로 가보겠습니다:
参数分别表示: content必需。规定要插入的内容(可包含 HTML 标签)。 selector必需。规定把内容追加到哪个元素上。
bind() 구문은 $(selector).bind(event,data,function,map)
위 내용은 jQuery를 통해 요소에 클릭 및 더블클릭 이벤트를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!