首页 > 代码库 > 新的事件

新的事件

getElementsByClassName(名字)【不兼容IE9及以上】
getElementsByName(名字)【不兼容IE9及以上】
通过名字来获取元素 ,支持高级浏览器


onsubmit表单验证:当表单提交的时候,会触发的事件

<
body> <form action="1.php"> 用户名: <input type="text" name="userName" /><br> <input type="submit" /> </form> </body> <script> window.onload =function () { var oForm = document.getElementsByTagName(form)[0]; var oInput = document.getElementsByName(userName)[0]; oForm.onsubmit = function () { if (oInput.value == ‘‘) { alert(请输入用户名); return false; } }; }; </script>
onchange: 一般用于select标签(选中一个列表项,则触发此事件)

<
body> <select id="sel"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="tianjin">天津</option> </select> </body> <script> window.onload = function (){ var oSel = document.getElementById(sel); oSel.onchange = function () { alert(this.value); } } </script>
oninput: 
  当输入框值改变的时候会触发的事件,实时监听到输入框的改变,
  无论用什么方式赋值,都可以监听到值得改变 (IE9以上)


onpropertychange:
  当输入框值改变的时候会触发的事件 (会执行几次)(IE9以下)


<
script> window.onload = function () { var oInput = document.getElementsByTagName(input)[0]; // oInput.oninput = function () { // alert(this.value); // } oInput.onpropertychange = oInput.oninput = function () { alert(this.value); } } </script>
onfocus: 获取焦点
onblur: 失去焦点

placeholder:属于H5的新属性,低版本的浏览器是不兼容,只能放置文字



<
style> #box { position: relative; } input { width: 300px; height: 40px; outline: none; padding-left: 3px; } #box span { position: absolute; color: #ccc; left: 8px; top: 12px; } </style> <body> <div id="box"> <input type="text" /> <!-- 就是提示文字 --> <!-- 给span添加背景图片就够了 --> <span>这是提示文字</span> </div> </body> <script> window.onload = function () { var oInput = document.getElementsByTagName(input)[0]; var oSpan = document.getElementsByTagName(span)[0];
oInput.oninput
= oInput.onpropertychange = function () { oSpan.style.display = none; } } //点击文字获取焦点 oSpan.onclick = function () { //获取焦点 oInput.focus(); } //获取 oInput.onfocus = function () { oSpan.style.display = none; } //失去 oInput.onblur = function () { if (this.value == ‘‘) { oSpan.style.display = block; } } } </script>

 

新的事件