We Keep Coding

Why is event.defaultPrevented undefined?

As per the MDN docs, a click event should have a property called preventedDefault: https://developer.mozilla.org/en-US/docs/Web/API/Event/defaultPrevented
However, in my code, defaultPrevented is undefined (Chrome and Safari). Instead there is another property called: isDefaultPrevented which seems to do the trick, however, this does not work in iOS Safari.
$('a').click(function(event) {
event.isDefaultPrevented; // returns true in Chrome (if event.preventDefault() was called)
event.defaultPrevented; // the "correct" way to do it as per MDN docs, however, it doesn't work in Chrome nor iOS.
});

This is the way to do it, if you're using jQuery.
$('a').click(function(event) {
event.originalEvent.defaultPrevented; // aparently jQuery will alter the event property, but it stores everything in 'originalEvent'
});

IE9 unable to get property 'remove' of undefined or null reference

I am working on a site, where I sometimes need to load a big banner into my header. The header has some default styles, which I need to remove if the specific page has a banner. These extra styles are in a class, which is then removed server side if there is a banner present. It works across all browsers, except in IE9.
document.onreadystatechange = function () {
// Initialize app when document is "ready"
if (document.readyState == "complete") {
var dom = {};
dom.$header = document.querySelector('.js-header');
dom.$banner = document.querySelector('.js-banner-image');
resizeBanner();
}
}
function resizeBanner(){
if(dom.$banner && dom.$banner !== null && dom.$banner !== undefined) {
dom.$header.classList.remove('has-no-banner');
}
}
The browser halts when it tries to remove the class, because it is "unable to get property 'remove' of undefined or null reference". However, the variable is defined and the element exists in the DOM.
If I go to a page that doesn't have a banner, the function doesn't fire (this is expected behaviour), so logically it's not the conditional that's messed up, it finds dom.$banner just fine, but just to test I've tried giving the element an ID, and declare that right before my method. That did not solve the problem.
The script file is referenced in the bottom of my document with defer async.
What am I doing wrong here?

The .classList property is not supported in IE9. Use a more traditional way of adding/removing classes as shown here: Adding and Deleting from objects in javascript

jQuery: Javascript throws Error "The operation is insecure" when setting value

I am trying to find a fallback solution for browsers who do not interpret the placeholder attribute for input elements.
I have this simple jQuery Script but it throws an Error
SecurityError: "The operation is insecure.
this.value = val;"
Here's my script:
$('document').ready(function(){
$('input').each(function() {
if ($(this).val() === '' || $(this).val() === undefined) {
$(this).val($(this).attr('placeholder'));
}
});
});
Anyone any ideas what i can do? Or what i am doing wrong? Or what this error means?
It happens in Firefox, haven't tested it in other Browsers yet.

I have just fixed a similar problem in my project. It turned out that I was trying to set a value of a <input type="file" ...> input. It seems that you may be facing the same problem, because you are selecting all inputs of a document regardless of their type.
If you have firebug installed, try looking for the input that causes this error by inserting a log command before trying to modify the input's value.
$('document').ready(function(){
$('input').each(function() {
if ($(this).val() === '' || $(this).val() === undefined) {
// Log goes here
window.console.log(
'There is an input without a value!',
this);
$(this).val($(this).attr('placeholder'));
}
});
});

I had an insecure warning in conjunction with antoher function.
The reason there simply was, that a library function was called with an array given as parameter, but it expected an element (dom).
The result was the expected, but I'm sure, this won't be in any case.
So check if the types of your variables are the one you (or the other side) want's it to.

'event' equivalent in Firefox

I am using the following code and it works perfectly fine in Chrome.
function dayBind(xyzValue) {
if(event.type == 'click')
alert('Mouse Clicked')
}
Note that there was no 'event' variable passed to the function but still it was available for me in case of chrome. But when I use Firefox I get 'event' undefined.
I tried using the following workarounds:
var e=arguments[0] || event;
also:
var e=window.event || event;
But none of them worked for me. Is there any 'event' equivalent in Firefox?

Because IE and Chrome put the event in the global object window, so you can get it. In firefox, you need to let the first parameter be the event.
function dayBind(event, xyzValue) {
var e=event || window.event;
if(event.type == 'click')
alert('Mouse Clicked')
}

If you're setting up the handler with an "onclick" attribute or something (which, since you tagged the question "jQuery", you really should consider not doing), you have to explicitly pass it:
<button type=button onclick='whatever(event)'>Click Me</button>

If you need it to work cross browser, simply use the arguments object:
function dayBind()
{
var e=arguments[0];
if(!!e && e.type === 'click')
{
alert('Mouse Clicked')
}
}
References
Overview of Events and Handlers
DOM Event Handlers
eventTarget.addEventListener

I am working in a plugin's callback function. I cannot call it myself.
One simple question to your suggestion: when you write: onclick="whatever(event)" you are writing javascript in the value of onclick attribute, right?
Why can't you make the same function call inside some other function like this:
function foo(){ whatever(event); // this is also javascript }
// But this doesn't work for me in FireFox 10.0.2
The code in the "onclick" attribute should be thought of as part of a function that the browser creates for you. That function automatically has the "event" parameter available. Writing the attribute as I did in the answer cause that parameter to be passed on the your other function.
Really, you should read about the jQuery API and use that to bind event handlers instead of using "onclick" and other similar attributes.

Why does my Firefox extension not add event handlers using jQuery 1.4.2 object pulled from webpage in Firefox 4

My Firefox extension grabs a jQuery 1.4.2 object that is already embedded on a webpage and then tries to use that jQuery object to modify that page. It worked well in Firefox 3.x, but it does not seem to work in Firefox 4.
Here's my code:
window.addEventListener("load", function() { MyExt.init(); }, false);
var MyExt = {
targetHost: "somewebsite.com",
init: function() {
var appcontent = document.getElementById("appcontent"); // browser
if (appcontent){
appcontent.addEventListener("DOMContentLoaded", MyExt.onPageLoad, true);
}
},
onPageLoad: function(aEvent) {
var doc = aEvent.originalTarget; // doc is document that triggered "onload" event
var loc = doc.location;
var host = '';
if (loc.toString() != "about:blank") {
host = doc.location.host;
}
// Edit page
if (host == MyExt.targetHost) {
var $ = doc.defaultView.wrappedJSObject.$;
// this works
$('p').css('color', 'green');
// this works in Firefox 3.x, but does not work in Firefox 4
// instead it shows the following error:
// "Error: uncaught exception: TypeError: handler is undefined"
$('.sometextarea').keyup(function(event) { alert('it should work, but does not'); });
// even this does not work as expected
// it should display true, but it displays false
alert($.isFunction(function(){}));
}
}
What am I doing wrong?

Yes, you have to use wrappedJSObject due to API changes:
Specifying xpcnativewrappers=no in your manifest (that is, XPCNativeWrapper automation) is no longer supported. This was always intended to be a short-term workaround to allow extensions to continue to work while their authors updated their code to use XPCNativeWrappers.
If your add-on depends upon XBL bindings attached to content objects—for example, the ability to call functions or get and set properties created by the XBL binding—you will need to use the XPCNativeWrapper property wrappedJSObject to access wrapped objects.
If you need to be able to call functions or access properties defined by web content, you'll need to do this as well. This may be the case if, for example, you've written an extension that adds a delete button to a web mail service, and the service defines a window.delete() function that you need to call.
If, on the other hand, all you're doing with content is accessing DOM methods and properties, you've never needed to be using xpcnativewrappers=no in the first place, and should simply remove it from your manifest.