event.srcElement 获得引发事件的控件 (表单) 代码实例
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="https://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- <script type="text/javascript">
- function getInput() {
- var inputs = document.getElementsByTagName("input"); // 取得所有的 input 表单
- for (var i = 0; i <inputs.length; i++) { // 遍历所有的 input 表单
- var inputName = inputs[i]; // 获得当前遍历到的 input 表单
- inputName.value = "哈哈"; // 将当前的 input 表单 value 属性赋值 "哈哈"
- inputName.onclick = btnClick; // 给遍历到的当前表单注册 onclick 事件, 事件的处理函数为 btnClick
- // 注意我这里只是给 inputName 的 onclick 事件指定了一个处理函数 btnClick, 具体函数如何定义, 则会写在以下 btnClick()函数中
- }
- }
- //vet 是一个对象 (其实就是 event, 名字可以随便起) 现在我将它作为一个参数来传递, 它就是指控件触发的事件的状态, 既然他是一个对象, 它肯定有一些属性的, 其中就包含了 srcElement, 或者火狐中的 target, 还有些 onclick 等事件
- function btnClick(evt) {
- var inputs = document.getElementsByTagName("input");
- for (var i = 0; i < inputs.length; i++) {
- var inputName = inputs[i];
- // 在 IE 中 srcElement 表示产生事件的源, 比如是哪个按钮触发的 onclick 事件, 火狐中则是 target.
- //window.event.srcElement 取得引发 onclick 事件的控件(表单元素). 在火狐中 srcElement 无效(要用 target)
- var obj = evt.srcElement ? evt.srcElement : evt.target;
- if (inputName == theEvent.target) { // 如果当前表单就是引发事件的控件, 就将当前表单的 value 值设为 "我被点击了", 否则设为 "哈哈"
- inputName.value = "我被点击了";
- }
- else {
- inputName.value = "哈哈";
- }
- }
- }
- </script>
- </head>
- <!-- 在页面加载完毕后就会触发 onload 事件, onload 事件就会调用 getInput()函数, 从而给所有的 input 表单的 value 赋值为 "哈哈"-->
- <body onload="getInput()">
- <form>
- <input type="button" />
- <input type="button" />
- <input type="button" />
- <input type="button" />
- </form>
- </body>
- </html>
简写
- <html xmlns="https://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- <script src="Jquery/jquery-1.10.2.js" type="text/javascript"></script>
- <script type="text/javascript">
- function getInput() {
- var inputs = document.getElementsByTagName("input");
- for (var i = 0; i <inputs.length; i++) {
- inputs[i].value = "哈哈";
- inputs[i].onclick = function (evt) {
- var inputs = $("input"); // 等同于 document.getElementsByTagName("input");
- for (var i = 0; i < inputs.length; i++) {
- if (inputs[i] == evt.target) { // 注意 == 号, 别写成了 =
- inputs[i].value = "我被点击了";
- }
- else {
- inputs[i].value = "哈哈";
- }
- }
- };
- }
- }
- </script>
- </head>
- <body onload="getInput()">
- <input type="button" />
- <input type="button" />
- <input type="button" />
- </body>
- </html>
来源: https://www.2cto.com/kf/201806/752541.html