offset：
1.可以得到任意样式表中的样式值
2.offsetWidth获得的数值是没有单位的数字
3.offsetWidth包含padding和border的宽度
4.offset等属性是只读属性，不能赋值
style：
1.只能得到行内样式表的值
2.styleWidth获得的是带有单位的字符串
3.styleWidth包含padding不包含border的宽度
4.styleWidth是可读写属性，可以获取也可以赋值
1：表单的鼠标事件：
表单事件：
onfocus 获取焦点
onblur 元素失去焦点
onchange 用户改变域的内容，针对是select选择框使用
（value值是后台所需要的值 如果想传给后台 请把value属性上 写上你需要传的值）
onreset 表单重置事件
不支持input标签，支持form标签。
onreset 使用这个事件 除了默认的可以清除表单外还可以做一些 清除表单之后的事情 ，比如把输入的背景色改回来。
onsubmit 表单提交事件
不支持input标签，支持form标签
案列：
写一个表单 有密码框
输入框 获得焦点的时候 框内的文字颜色变红
输入框 失去焦点的时候 框内的文字颜色变黑
选择框 选择 男女 默认男
修改的时候触发 alert出你选的性别
提交 alert 我提交了 reset alert 我重置了
<form action="" method="get" id="formId">
输入框: <input type="text" name="" id="textId"><br>
密码框: <input type="password" name="" id="pwd"><br>
选择框: <select name="" id="selectId">
<option value="男" selected>男</option>
<option value="女">女</option>
</select>
<p>
性别：
<input type="radio" name="1" id="nan" value="男" onclick="radioFn(value)">男性
<input type="radio" name="1" id="nv" value="女" onclick="radioFn(value)">女性
</p>
<input type="submit" name="" id="submitId">
<input type="reset" name="" id="resetId">
</form>
<script>
let textId = document.getElementById('textId')
let selectId = document.getElementById('selectId')
let formId = document.getElementById('formId')
let nan = document.getElementById('nan')
let nv = document.getElementById('nv')
function radioFn1(){
alert(nan.value)
}
function radioFn2(){
alert(nv.value)
} */
function radioFn(value){
alert(value)
}
textId.onfocus = function () {
textId.style.color = 'red'
}
textId.onblur = function () {
textId.style.color = 'black'
}
selectId.onchange = function () {
alert(selectId.value)
}
formId.onreset = function () {
alert('我重置了')
}
formId.onsubmit = function () {
alert('我提交了')
}
复制代码
2：监听事件:
注册事件：传统的事件。注册事件的唯一，同一个元素同一个事件在只能设置一个处理函数，如果再次设置，后面的会覆盖之前的
监听addEventListener事件、
方法监听注册方式：addEventListence（） 是一个方法 按照注册事件 依次处理 接受三个参数：type：事件类型字符串 比如 click ，mouseover 事件不要带on listener：事件处理函数，事件发生时，会调用该监听函数 useCapture：可选函数，是一个布尔值，默认是false
和onclick的区别 区别一 写的方法不会被覆盖
区别二 false表示冒泡（从里到外触发事件）
true表示捕获 （从外到里触发事件）
window.addEventListener('click',function(){
alert(1)
复制代码
})
window.addEventListener('click',function(){
alert(2)
})
window.addEventListener('click',function(){
alert(3)
})
复制代码
冒泡事件： 点击子元素 把父元素的事件也调用了
false表示冒泡（从里到外触发事件）
true表示捕获 （从外到里触发事件）
事件源：e console.log(e);
阻止冒泡方法：e.stopPropagation();
取消冒泡属性：e.cancelBubble = true;
event是一个js的关键字 这个关键字变量保存了事件源对象的属性
console.log(event);
event.stopPropagation()
event.cancelBubble = true;
.div1{width: 200px;height: 200px;background-color: aqua;}
.div2{width: 100px;height: 100px;background- color:beig
<div class="div1">
<div class="div2"></div>
</div>
let div1 = document.querySelector('.div1')
let div2 = document.querySelector('.div2')
div1.onclick = function(){
alert(1)
}
div2.onclick = function(e)
兼容写法 让谷歌和ie都支持
{let eObj = e || event;
// eObj.stopPropagation()
eObj.cancelBubble = true;
div2.onclick = function(e) {
e.stopPropagation();
}
div2.onclick = function() {
event.stopPropagation()
// event.cancelBubble = true;
}
复制代码
3：转义符
\ 转义符 \ " 把" 当作一个字符串
div1.innerHTML = "<h1 style="color:red;"> 我是div</h1>"
// div1.innerHTML = "<h1 style='color:red;'>我是div</h1>"
}
作者：用户8712537862007
链接：juejin.cn/post/704739…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
