事件冒泡及阻止事件冒泡 事件的触发 事件参数对象 获取用户按下键盘的键
生活随笔
收集整理的這篇文章主要介紹了
事件冒泡及阻止事件冒泡 事件的触发 事件参数对象 获取用户按下键盘的键
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
事件冒泡及阻止事件冒泡
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>#dv1 {width: 400px;height: 200px;background-color: red;}#dv2 {width: 250px;height: 150px;background-color: green;}#dv4 {width: 200px;height: 100px;background-color: blue;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){$("#dv1").click(function(){// 為什么是undefined// 對象.id---->DOM中的console.log($(this).attr("id"));});$("#dv2").click(function(){console.log(this.id);console.log("助教好帥哦");});$("#dv4").click(function(){console.log($(this).attr("id"));return false;});});// document.getElementById("btn").onclick = function(e){// e.stopPropagation();// window.event.cancelBubble = true;// };</script> </head> <body><div id="dv1"><div id="dv2"><div id="dv4"></div></div></div> </body> </html>事件的觸發
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>$(function(){// 文本框添加獲取焦點的事件$("#txt").focus(function(){console.log("我的獲取焦點的事件觸發了");// 設置當前元素的下一個兄弟元素中顯示一個提示信息$(this).next("span").text("文本框獲取焦點了");});// 按鈕的點擊事件$("#btn").click(function(){// 調用文本框的獲取焦點的事件--第一種方式讓別的元素的事件觸發// 對象.事件名字();// $("#txt").focus();// 觸發的意思// 第二種觸發事件的方式// $("#txt").trigger("focus");// 這種方式可以觸發該事件,但是,不能觸發瀏覽器的默認行為$("#txt").triggerHandler("focus");});});</script> </head> <body> <input type="button" value="我也要觸發文本框的獲取焦點的事件" id="btn"> <input type="text" value="" id="txt"><span id="sp"></span></body> </html>事件參數對象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 400px;height: 200px;background-color: red;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){// 事件參數對象$("#dv").mousedown(function(e){// console.log(arguments.length);console.log(e);// 獲取鼠標按鍵的值// console.log(e.button);});});</script> </head> <body> <div id="dv"></div></body> </html>獲取用戶按下鍵盤的鍵
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 100px;background-color: red;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){$(document).mousedown(function(e){// console.log("哈哈");// console.log(e);// 判斷用戶按下鼠標的時候,有沒有按下alt鍵// console.log(e.altKey);if(e.altKey){// 用戶按下了alt鍵的同時也按下鼠標了console.log("用戶按下了alt鍵的同時也按下鼠標了");}else if(e.shiftKey){// 用戶按下了shift鍵,同時按下鼠標console.log("用戶按下了shift鍵,同時按下鼠標");}else if(e.ctrlKey){// 用戶按下了ctrl鍵,同時按下鼠標console.log("用戶按下了ctrl鍵,同時按下鼠標");}else{// 用戶按下了鼠標console.log("用戶按下了鼠標");}});});</script> </head> <body> <div id="dv"></div></body> </html>?
總結
以上是生活随笔為你收集整理的事件冒泡及阻止事件冒泡 事件的触发 事件参数对象 获取用户按下键盘的键的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 动态添加行 为元素解绑事件 delega
- 下一篇： 按键改变元素背景颜色 链式编程的原理 评