first commit
This commit is contained in:
commit
b37417dedb
47
20190925/20190925.md
Normal file
47
20190925/20190925.md
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
# 20190925
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
* 给任意元素添加监听器封装函数
|
||||||
|
```js
|
||||||
|
function addEventListener(ele,type,fn) {
|
||||||
|
if(ele.addEventListener) {
|
||||||
|
ele.addEventListener(type,fn,false)
|
||||||
|
} else if (ele.attachEvent) {
|
||||||
|
ele.attachEvent('on' + type, fn)
|
||||||
|
} else {
|
||||||
|
ele['on' + type] = fn
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
* 给任意事件解绑监听器封装函数
|
||||||
|
|
||||||
|
```js
|
||||||
|
//如需解绑监听器，则添加事件必须为命名函数
|
||||||
|
function removeEventListener(ele, type, fn) {
|
||||||
|
if(ele.removeEventListener) {
|
||||||
|
ele.removeEVentListener(type, fn, false)
|
||||||
|
} else if (ele.detachEvent) {
|
||||||
|
ele.detachEvent('on' + type, fn)
|
||||||
|
} else {
|
||||||
|
ele['on' + type] = fn
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
* 阻止事件冒泡
|
||||||
|
|
||||||
|
```js
|
||||||
|
//e | window.event ：事件参数对象，前者是w3c，后者IE
|
||||||
|
|
||||||
|
//google,ie8 | firefox不支持
|
||||||
|
//火狐不支持 window.event
|
||||||
|
window.event.cancelBubble = true;
|
||||||
|
e.cancelBubble = true;
|
||||||
|
|
||||||
|
//w3c firefox,google | ie8不支持
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
```
|
||||||
52
20190926/20190926.html
Normal file
52
20190926/20190926.html
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>Document</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.search {
|
||||||
|
width: 430px;
|
||||||
|
height: 42px;
|
||||||
|
margin: 150px auto;
|
||||||
|
}
|
||||||
|
.search .txt {
|
||||||
|
width: 360px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px #ccc solid;
|
||||||
|
line-height: 42px;
|
||||||
|
padding: 0px 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 14px;
|
||||||
|
color:#282828;
|
||||||
|
}
|
||||||
|
.search .btn {
|
||||||
|
display: inline-block;
|
||||||
|
width:60px;
|
||||||
|
height: 42px;
|
||||||
|
background: skyblue;
|
||||||
|
line-height: 42px;
|
||||||
|
text-align: center;
|
||||||
|
color: #000;
|
||||||
|
font-size: 14px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="search" id="search">
|
||||||
|
<input type="text" name="" id="txt" class="txt">
|
||||||
|
<a href="javascript:;" class="btn">搜索</a>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
function my$(id) {
|
||||||
|
return document.getElementById(id);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
47
20190926/20190926.md
Normal file
47
20190926/20190926.md
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
# 20190925
|
||||||
|
|
||||||
|
|
||||||
|
[linkToHtml](./20190926.html)
|
||||||
|
|
||||||
|
* 事件的阶段
|
||||||
|
* e.eventPhase 通过这个知道之间的阶段
|
||||||
|
1. 事件捕获 => 从外向里
|
||||||
|
2. 目标阶段 =>
|
||||||
|
3. 冒泡阶段 => 从里向外
|
||||||
|
|
||||||
|
* 绑定事件 addEventListener('不带on的事件类型',函数,<控制事件阶段>)
|
||||||
|
* <控制事件阶段> => false => 冒泡阶段
|
||||||
|
* <控制事件阶段> => true => 事件捕获
|
||||||
|
|
||||||
|
```js
|
||||||
|
// 前提 div.box1>div.box2>div.box3,且各个div绑定打印id的点击事件
|
||||||
|
my$('box3').addEventListener('click',fn,false);
|
||||||
|
// box3 -> box2 -> box1
|
||||||
|
my$('box3').addEventListener('click',fn,true);
|
||||||
|
// box1 -> box2 -> box3
|
||||||
|
```
|
||||||
|
|
||||||
|
* onmouseover|out 鼠标移入移出事件
|
||||||
|
|
||||||
|
* e.type 获取当前事件
|
||||||
|
```js
|
||||||
|
my$('btn').onclick = f1;
|
||||||
|
my$('btn').onmouseover = f1;
|
||||||
|
my$('btn').onmouseout = f1;
|
||||||
|
|
||||||
|
function f1(e) {
|
||||||
|
switch(e.type){
|
||||||
|
case 'click':
|
||||||
|
//点击TODO
|
||||||
|
break;
|
||||||
|
case 'mouseover':
|
||||||
|
//鼠标移入TODO
|
||||||
|
break;
|
||||||
|
case 'mouseout':
|
||||||
|
//鼠标移出TODO
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
* a标签 href属性为 javascript:; 阻止默认事件
|
||||||
33
20191009/20191009.md
Normal file
33
20191009/20191009.md
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
# 20191009
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
* window
|
||||||
|
* 所有变量属于window
|
||||||
|
* name,top 属于window自有属性，不可声明
|
||||||
|
* 属性以及方法`<window.>functionName`可以省略window
|
||||||
|
* `window.confirm();`模态框，返回Boolean
|
||||||
|
* `window.promit('str',defaultStr);`输入框返回str
|
||||||
|
* `window.onload` 页面加载完成事件
|
||||||
|
* `window.onunload` 页面关闭之后
|
||||||
|
* `window.onbeforeunload` 页面关闭之前
|
||||||
|
|
||||||
|
* BOM
|
||||||
|
* location
|
||||||
|
* href 页面跳转
|
||||||
|
* hash 地址#后边的内容
|
||||||
|
* host 主机和端口号
|
||||||
|
* hostname 主机名
|
||||||
|
* pathname 文件路径(相对路径)
|
||||||
|
* port 端口
|
||||||
|
* protocol 协议
|
||||||
|
* search ?后边的内容(参数)
|
||||||
|
* `assign(<hrefStr>)` 跳转页面方法
|
||||||
|
* `replace(<hrefStr>)` 无记录跳转
|
||||||
|
* reload 重载
|
||||||
|
|
||||||
|
* history
|
||||||
|
* `go(<number>)` 页面跳转`<number>`个
|
||||||
|
* `back()` 回退
|
||||||
|
* `forward()` 前进
|
||||||
3
20191013/20191013.md
Normal file
3
20191013/20191013.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# 20191013
|
||||||
|
|
||||||
|
|
||||||
43
README.md
Normal file
43
README.md
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
# 吉软大前端笔记本
|
||||||
|
|
||||||
|
## 20190925
|
||||||
|
|
||||||
|
|
||||||
|
[linkToMd](./20190925/20190925.md)
|
||||||
|
|
||||||
|
* 给任意元素添加监听器封装函数
|
||||||
|
* 给任意事件解绑监听器封装函数
|
||||||
|
* 阻止事件冒泡
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 20190926
|
||||||
|
|
||||||
|
|
||||||
|
[linkToMd](./20190926/20190926.md)
|
||||||
|
|
||||||
|
* 事件的阶段
|
||||||
|
* 绑定事件 addEventListener('不带on的事件类型',函数,<控制事件阶段>)
|
||||||
|
* onmouseover|out 鼠标移入移出事件
|
||||||
|
* e.type 获取当前事件
|
||||||
|
* a标签 href属性为 javascript:; 阻止默认事件
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 20191009
|
||||||
|
|
||||||
|
|
||||||
|
[linkToMd](./20191009/20191009.md)
|
||||||
|
|
||||||
|
* window
|
||||||
|
* history
|
||||||
|
* location
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 20191013
|
||||||
|
|
||||||
|
|
||||||
|
[linkToMd](./20191013/20191013.md)
|
||||||
|
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user