diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232/.keep" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/.keep" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/test.html" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/test.html" new file mode 100644 index 0000000000000000000000000000000000000000..9161e5919c20da8577e16996e11bdd90b6ee8961 --- /dev/null +++ "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/test.html" @@ -0,0 +1,39 @@ + + + + + + + + Document + + + +
+ 地上 + 海里 + 天上 +
+

+ + + + \ No newline at end of file diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/.keep" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/2022-11-24-\344\272\213\344\273\266.md" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/2022-11-24-\344\272\213\344\273\266.md" new file mode 100644 index 0000000000000000000000000000000000000000..5dcf9cfe565526682abe5f233e77e470cf5aefb0 --- /dev/null +++ "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/2022-11-24-\344\272\213\344\273\266.md" @@ -0,0 +1,123 @@ +## 事件 + +#### 事件绑定 + +##### 传统事件绑定： + +兼容性好，但是不能绑定多个同类型事件。 + +##### 现代事件绑定： + +绑定多个同类型事件时会依次执行，但是兼容性较差 + +#### 事件取消 + +##### 传统事件取消(DOM 0 中)： + +```js +btn.onclick = null +``` + +##### 现代事件取消(DOM 2 中)： + +```js +//DOM +btn.removeEventListener('click',fn); +//IE +btn.detachEvent('onclick',fn); +``` + + + +#### 事件流 + +##### **事件冒泡**： + +微软提出了名为**事件冒泡**的事件流。事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。可以想象把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。 + +##### **事件捕获**： + +网景提出另一种事件流名为**事件捕获**。事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)，与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。同样形象的比喻一下可以想象成警察逮捕屋子内的小偷，就要从外面一层层的进入到房子内。 + +##### 事件流的三个阶段： + +事件有三个阶段，首先发生的是捕获阶段，然后是目标阶段，最后才是冒泡阶段，对于捕获和冒泡，我们只能干预其中的一个，通常来说，我们可能会干预事件冒泡阶段，而不去干预事件捕获阶段。 + + +#### 事件阻止冒泡： + +```js +ev.stopPropagation(); //不支持ie9以下 DOM +event.cancelBubble = true; //ie独有 ie + +封装取消冒泡的函数：stopBubble(event) +``` + +#### 事件对象： + +ie: window.event + +非ie: e + +#### 阻止默认行为： + +默认事件：表单提交，a标签跳转，右键菜单等 + +```js +//以对象属性的方式注册的事件才生效 DOM0 +return false; +//阻止默认行为 DOM浏览器, ie9以下不支持 +ev.perventDefault(); +//阻止默认行为 DOM与IE +ev.returnValue = false +``` + +#### JS常用事件： + +##### 点击事件 + +onclick：单击事件 + +ondblclick：双击事件 + +##### 焦点事件 + +onblur：失去焦点 + +onfocus:元素获得焦点。 + +##### 加载事件 + +onload：一张页面或一幅图像完成加载。 + +##### 鼠标事件 + +onmousedown： 鼠标按钮被按下。 + +onmouseup： 鼠标按键被松开。 + +onmousemove： 鼠标被移动。 + +onmouseover： 鼠标移到某元素之上。 + +onmouseout ：鼠标从某元素移开。 + +##### 键盘事件 + +onkeydown ：某个键盘按键被按下。 + +onkeyup： 某个键盘按键被松开。 + +onkeypress ：某个键盘按键被按下并松开。 + +##### 选择和改变 + +onchange ：域的内容被改变。 + +onselect ：文本被选中。 + +##### 表单事件 + +onsubmit ：确认按钮被点击。 + +onreset： 重置按钮被点击 \ No newline at end of file diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\232/.keep" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\232/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/.keep" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/test.html" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/test.html" new file mode 100644 index 0000000000000000000000000000000000000000..49c25f6afc40dcf33bc19ef99b0d0ca659fe37b6 --- /dev/null +++ "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/test.html" @@ -0,0 +1,52 @@ + + + + + + + test + + + + + + + + + + + + + + + + + + + + + +
第一行
第二行
第三行
第四行
第五行
+ + 1 + 2 + 3 + 4 + + + + \ No newline at end of file diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/.keep" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/2022-11-25-JQuery.md" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/2022-11-25-JQuery.md" new file mode 100644 index 0000000000000000000000000000000000000000..3630414bd5c3effa67df97ce7b651331f1b2aecc --- /dev/null +++ "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/2022-11-25-JQuery.md" @@ -0,0 +1,14 @@ +## JQuery + +#### JQuery的优点： + +- 代码简洁 +- 完美兼容 +- 丰富的插件 + +#### JQuery选择器： + +- 基础选择器（标签选择器）：$('div') +- id：# div +- class：. div +- 伪类选择器：$(':input') \ No newline at end of file