Question

我有简单的HTML文本框，有几个事件，如“onfocus”更改背景颜色，“onkeypress”确保只接受数字，“onblur”格式化和验证数字到我们的电话格式，“onmouseover”显示工具提示， “onmouseout”隐藏工具提示等。

我希望动态管理所有事件，而不使用任何第三方库（如原型，jQuery，Dojo等）。我的浏览器只有IE 6及以上版本。没有FIREFOX。我期待<body>标记下的代码就像 <input type="text" id="usphone" name="usphone" title="enter phone with area code" class="usphoneClass"/> 和<script>标记下的代码如下所示。

document.getElementByID('usphone').onfocus= ChangeBackgroudColor();
document.getElementByID('usphone').onkeypress= return isNaN();
document.getElementByID('usphone').onblur= formatUSPhone();validateUsPhone();ChangeColor();
document.getElementByID('usphone').onmouseover= showtooltip();
document.getElementByID('usphone').mouseout= hidetooltip();

Answer 1

虽然我不同意不使用第三方库，但如果您的工具提示中没有链接，您可以试试这个

HTML

<a class="tooltipTarget" onclick="return false;">
     <div class="tooltip">BLAH BLAH BLAH yackity smackity</div>
</a>

CSS

a.tooltipTarget {position:relative;}
a.tooltipTarget .tooltip {display:none;}

a.tooltipTarget:hover .tooltip {
      position:absolute;
      right:10px; /* Adjust as per preference*/
      bottom:5px;
}

Answer 2

IE使用attachEvent方法注册事件处理程序。用法是

Object.attachEvent(eventName, method);

其中eventName是onevent形式的字符串，method是对要调用的javascript函数的引用。 handler方法将接收1个参数，即event对象。

根据你的情况，你会有

var phoneInput = document.getElementByID('usphone');
phoneInput.attachEvent('onfocus', ChangeBackgroudColor);  
phoneInput.attachEvent('onkeypress', function(e) { return isNaN(e.srcElement.Value); });
phoneInput.attachEvent('onblur', function (e) {
    formatUSPhone();
    validateUsPhone();
    ChangeColor();
});
// TODO onmouseover, onmouseout

请注意，函数引用不包括括号，因为我们传递引用而不是此时执行函数。此外，如果您向同一元素注册多个处理程序，则无法保证执行顺序。如果你需要按照你指定onblur的特定顺序执行函数，你可以将这些调用包装在一个匿名函数中。

IE包含对在event.srcElement中触发事件的元素的引用。

使用javascript来管理元素事件

2 个答案: