diff --git "a/36\351\273\204\345\257\214\350\264\265/11-23-\344\272\213\344\273\266\344\275\234\344\270\232/11-23-\344\272\213\344\273\266\344\275\234\344\270\232.html" "b/36\351\273\204\345\257\214\350\264\265/11-23-\344\272\213\344\273\266\344\275\234\344\270\232/11-23-\344\272\213\344\273\266\344\275\234\344\270\232.html" new file mode 100644 index 0000000000000000000000000000000000000000..356162bb21fc5d6c81756f2687001a86e99a5b8e --- /dev/null +++ "b/36\351\273\204\345\257\214\350\264\265/11-23-\344\272\213\344\273\266\344\275\234\344\270\232/11-23-\344\272\213\344\273\266\344\275\234\344\270\232.html" @@ -0,0 +1,30 @@ + + + + + + + Document + + +
+ +
+ + + \ No newline at end of file diff --git "a/36\351\273\204\345\257\214\350\264\265/11-23-\344\272\213\344\273\266\344\275\234\344\270\232/11-23-\344\272\213\344\273\266\347\254\224\350\256\260.md" "b/36\351\273\204\345\257\214\350\264\265/11-23-\344\272\213\344\273\266\344\275\234\344\270\232/11-23-\344\272\213\344\273\266\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..70f9656683fdc6af7a128522e213c9566fce9999 --- /dev/null +++ "b/36\351\273\204\345\257\214\350\264\265/11-23-\344\272\213\344\273\266\344\275\234\344\270\232/11-23-\344\272\213\344\273\266\347\254\224\350\256\260.md" @@ -0,0 +1,70 @@ +JS第二十一课事件笔记 + +//DMO 0当有多个同类型事件触发时，只会触发一个 ，兼容性较高 + +``` +var btn = document.querySelector('button'); + //点击 + function aler() { + btn.onclick = function () { + alert('全是帅哥'); + } + } + //优先级更高 + btn.onclick = function () { + alert('全是学霸'); + } +``` + +//DOM 2 :当有多个同类型事件触发时，会依次触发， 兼容性较差 + +``` +var btn = document.querySelector('button'); + //addEventListener('事件类型','') + + //DOM:谷歌 double click + btn.addEventListener('click',fn); + btn.addEventListener('mousemove',fn1); + function fn() { + alert('2班'); + // btn.removeEventListener('click',fn); + } + function fn1() { + alert('4班'); + } +``` + +//事件取消 + +btn.removeEventListener('click',fn); + +//冒泡 + + // body.addEventListener('click',fn1,true); + + 1.事件从最外层开始捕获，直到当前元素（触发事件的对象），再从当前元素向外冒泡到document + + 2.事件会自发冒泡(微软)（从里层向外层冒泡，直到document） + + 3.事件捕获(网景)（从最外层向里层） + +``` +function fn1() { + alert('这是最外层body里面的点击事件') + } + + //addEventListener('click',fn2,false)：默认false，表示冒泡 true：捕获 + div.addEventListener('click',fn2,false); + function fn2() { + alert('这是外层div里面的点击事件') + } + div1.addEventListener('click',fn,false); + function fn() { + alert('这是内层div里面的点击事件') + } + html.addEventListener('click',fn3,false); + function fn3() { + alert('这是html里面的点击事件') + } +``` + diff --git "a/36\351\273\204\345\257\214\350\264\265/11-24-\344\272\213\344\273\266\345\257\271\350\261\241\344\275\234\344\270\232/11-24-\344\272\213\344\273\266\345\257\271\350\261\241\344\275\234\344\270\232.html" "b/36\351\273\204\345\257\214\350\264\265/11-24-\344\272\213\344\273\266\345\257\271\350\261\241\344\275\234\344\270\232/11-24-\344\272\213\344\273\266\345\257\271\350\261\241\344\275\234\344\270\232.html" new file mode 100644 index 0000000000000000000000000000000000000000..6f5165b3034c8c86d92e88a8ea9c3d3ee9b4a4ce --- /dev/null +++ "b/36\351\273\204\345\257\214\350\264\265/11-24-\344\272\213\344\273\266\345\257\271\350\261\241\344\275\234\344\270\232/11-24-\344\272\213\344\273\266\345\257\271\350\261\241\344\275\234\344\270\232.html" @@ -0,0 +1,21 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git "a/36\351\273\204\345\257\214\350\264\265/11-24-\344\272\213\344\273\266\345\257\271\350\261\241\344\275\234\344\270\232/11-24-\344\272\213\344\273\266\345\257\271\350\261\241\347\254\224\350\256\260.md" "b/36\351\273\204\345\257\214\350\264\265/11-24-\344\272\213\344\273\266\345\257\271\350\261\241\344\275\234\344\270\232/11-24-\344\272\213\344\273\266\345\257\271\350\261\241\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..80c7f0e8e774e5a5f0f06a3aa0b0389a89ef8465 --- /dev/null +++ "b/36\351\273\204\345\257\214\350\264\265/11-24-\344\272\213\344\273\266\345\257\271\350\261\241\344\275\234\344\270\232/11-24-\344\272\213\344\273\266\345\257\271\350\261\241\347\254\224\350\256\260.md" @@ -0,0 +1,104 @@ +JS第二十二课事件对象笔记 + +1.事件对象:ie:window.event + +``` +var event = event || window.event; +``` + +2.事件源对象:event.target + +``` +var target = event.target || event.srcElement; +``` + +事件委托（代理） + +1.把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件[监听](https://so.csdn.net/so/search?q=监听&spm=1001.2101.3001.7020)的职务。事件代理的原理是DOM元素的事件冒泡。 + +2.利用事件冒泡，和事件源对象进行处理。 + +阻止默认行为 + +默认事件有: + +1.表单提交， + +2.a标签跳转， + +``` +//阻止标签跳转 +测试 + +``` + +3.右键菜单等 + +#### JS常用事件 + +###### 1.点击事件 + +onclick：单击事件 + +ondblclick：双击事件 + +###### 2.焦点事件 + +onblur：失去焦点 + +onfocus:元素获得焦点。 + +###### 3.加载事件 + +onload：一张页面或一幅图像完成加载。 + +###### 4.鼠标事件 + +onmousedown： 鼠标按钮被按下。 + +onmouseup： 鼠标按键被松开。 + +onmousemove： 鼠标被移动。 + +onmouseover： 鼠标移到某元素之上。 + +onmouseout ：鼠标从某元素移开。 + +mouseenter： + +mouseleave： + +contextmenu: + +鼠标按下时，通过事件对象 event中的属性 button 或 which 可以获取鼠标按键的编号e.button 事件对象中的 button属性可以获取鼠标按键的编号e.which 也可以获取鼠标的按键编号 0 左键 1滚轮 2右键 + +DOM3规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键 + +如何解决mousedown和click的冲突 + +###### 5.键盘事件 + +onkeydown ：某个键盘按键被按下。 + +onkeyup： 某个键盘按键被松开。 + +onkeypress ：某个键盘按键被按下并松开。 + +###### 6.选择和改变 + +onchange ：域的内容被改变。 + +onselect ：文本被选中。 + +###### 7.表单事件 + +onsubmit ：确认按钮被点击。 + +onreset： 重置按钮被点击 \ No newline at end of file diff --git "a/36\351\273\204\345\257\214\350\264\265/11-24-\344\272\213\344\273\266\345\257\271\350\261\241\344\275\234\344\270\232/24.html" "b/36\351\273\204\345\257\214\350\264\265/11-24-\344\272\213\344\273\266\345\257\271\350\261\241\344\275\234\344\270\232/24.html" new file mode 100644 index 0000000000000000000000000000000000000000..6edcaf68c2884e0dec2279fa8be629849e6f2a91 --- /dev/null +++ "b/36\351\273\204\345\257\214\350\264\265/11-24-\344\272\213\344\273\266\345\257\271\350\261\241\344\275\234\344\270\232/24.html" @@ -0,0 +1,28 @@ + + + + + + + Document + + + + + + \ No newline at end of file