14.js—DOM
1. 通用元素方法:
-
append/prepend:
-
after/before
-
blur/focus/click/: 触发事件
-
onblur/onfocus/onclick/: 触发事件要做的处理
-
οnblur=function(){} .blur()
<script> function loadpage() { document.getElementById("ename").focus(); // 获取焦点方法 document.getElementById("ename1").onfocus=function() { // 获取焦点的时候 console.info(this) this.style.backgroundColor="pink" }; document.forms[0].onsubmit = function() { if (!document.all.ename1.value) { alert("ename1必须输入"); return false; // onsubmit return false提交中断 } } } function listen(ele) { if (ele.value.indexOf('exit') != -1) { // ele.blur(); document.forms[0].submit(); } } function blurename(ele) { ele.style.backgroundColor="white" } </script> <div> <form action="abc.do"> <input id="ename1" onblur="blurename(this)" /> <input id="ename2" /> <input id="ename" /> <textarea rows="10" cols="10" oninput="listen(this)"></textarea> <button class="btn-primary">提交</button> </form> <a href="javascript:void(0)" onclick="document.querySelector('.btn-primary').click()">提交</a> </div>
-
2. 各种on事件:
-
onblur 失去焦点
-
onfocus: 获取焦点
-
ondbclick: 双击
-
onclick: 点击
-
ondrop:拖拽之后放
-
ondrag: 拖拽
-
onkeydown: 键盘按下
-
onkeypress:按住
-
onkeyup:键盘抬起
- event.key | event.code | event.keyCode : 不同数字或字母代表键盘输入
-
onmousedown: 鼠标左键按下
-
onmouseup :鼠标左键抬起
- event.target: 事件源
-
onmouseover: 鼠标进入标签
-
onmousemove: 在标签上移动
-
onmouseout: 鼠标移出标签
- event.offsetX/Y: 鼠标相对标签的位置
-
onchange: 内容发生改变
-
oninput: 正在输入时
-
onload: body页面加载完
3. window的方法
-
alert()
-
confirm(); 返回值boolean
-
prompt(); 返回字符串
<button onclick="onw()">open</button> <script> function onw() { // window.open("aaa","test2.html", "_blank"); var str = window.prompt("请输入名字"); console.log(str) } </script>