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>